{% extends base_layout %}

{% block header_title %}
        {% trans %}Sign Up{% endtrans %}
{% endblock %}

{% block content %}

    <form id="form_register" action="{{ url|safe }}" method="post" class="well form-horizontal">
        <fieldset>
            <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
            {{ macros.field(form.username, label=_("Username"), placeholder=_("Enter your")+" "+_("Username"), class="input-xlarge focused required") }}
            {{ macros.field(form.name, label=_("Name"), placeholder=_("Enter your")+" "+_("Name"), class="input-xlarge focused") }}
            {{ macros.field(form.last_name, label=_("Last Name"), placeholder=_("Enter your")+" "+_("Last Name"), class="input-xlarge focused") }}
            {{ macros.field(form.email, label=_("Email"), placeholder=_("Enter your")+" "+_("Email"), class="input-xlarge focused required email", type="email") }}
            {{ macros.field(form.password, label=_("Password"), placeholder=_("Enter your")+" "+_("Password"), class="input-xlarge focused required", type="password") }}
            {% if not is_mobile %}
            {{ macros.field(form.c_password, label=_("Confirm Password"), placeholder=_("Confirm Password"), class="input-xlarge focused required", type="password") }}
            {% endif %}
            {{ macros.field(form.country, label=_("Country")) }}
            <div class="form-actions">
                <button type="submit" class="btn btn-primary">{% trans %}Sign Up{% endtrans %}</button>
            </div>
        </fieldset>
    </form>

{% endblock %}

{% block mediaJS %}
<script type="text/javascript">
    $().ready(function() {
        $("#form_register").validate({
            submitHandler: function(form) {
                    form.submit();
            },
            rules: {
                password: 'required',
                c_password: {
                    required: true,
                    equalTo: '#password'
                }
            },
            errorPlacement: function(error, element) {
                element.parent().parent().addClass("error");
                error.addClass("help-inline").appendTo( element.parent() );
            }
        });

        $("#password").passStrength({
            shortPassText: '{% trans %}Short Password{% endtrans %}',
            badPassText: '{% trans %}Insecure Password{% endtrans %}',
            goodPassText: '{% trans %}Good Password{% endtrans %}',
            strongPassText: '{% trans %}Secure Password{% endtrans %}'
        });
    });
</script>
{% endblock %}

